<template>
  <el-dialog
    title="查看卡密信息"
    :visible.sync="linkCardMessage.isShow"
    width="25%"
    center
  >
    <el-form ref="ruleForm" :model="formInline" label-width="80px">
      <div v-for="(item, index) in linkCardMessage.formData" :key="index">
        <el-form-item label="卡号:">
          {{ item.cardAccount }}
        </el-form-item>
        <el-form-item label="有效期:" class="border-bottom">
          {{ item.indate }}
        </el-form-item>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  props: {
    linkCardMessage: {
      type: Object,
      default: function() {
        return {
          isShow: false, // 显示隐藏
          formData: [
            {
              cardAccount: '',
              indate: ''
            }
          ]
        }
      }
    }
  },
  data() {
    return {
      formInline: {}
    }
  }
}
</script>

<style lang="less" scoped>
:deep(.el-dialog--center) {
  text-align: center;
  padding-bottom: 20px !important;
}
.el-form-item {
  margin-bottom: 0 !important;
}
.el-form-item__content {
  line-height: 20px !important;
}
.el-form-item__label {
  line-height: 20px !important;
}
.border-bottom {
  border-bottom: 1px solid #dcdfe6;
  padding: 0 0 20px 0;
}
</style>
